<template>
  <el-card
    :style="'margin:0 10px 15px 0;background-color:' + color"
    shadow="hover"
  >
    <div>
      <!-- 
      <h2 style="font-size: 100%; font-weight: normal">
        {{ messageData.upTime }}
      </h2>
 -->
    </div>
    <div>
      <p style="font-size: large">{{ messageData.comment }}</p>
    </div>
    <div>
      <h3 class="username">来自:{{ messageData.nickname || "神秘人" }}</h3>
    </div>
    <!-- 
    <div @click="like" style="float: right">
      <el-link type="primary" :underline="false">
        <i class="el-icon-thumb"></i>
        ({{ messageData.likeNum }})
      </el-link>
    </div>
 -->
  </el-card>
</template>

<script>
export default {
  name: "LiuYanCard",
  data() {
    return {
      colorList: [
        "#97cae6",
        "#cfc",
        "#FAC8C8",
        "#ffc",
        "#FAC8C8",
        "#ccf",
        "#c9c",
        "6cc",
        "ff3",
        "#9f6",
      ],
      color: "",
      isLike: false,
    };
  },
  props: ["messageData"],
  mounted() {
    this.color = this.colorList[Math.floor(Math.random() * 10)];
  },
  methods: {
    like() {
      if (!this.isLike) {
        post("/message/like", { id: this.messageData.id }).then((res) => {
          if (res.code == 200) {
            this.messageData.likeNum += 1;
            this.isLike = true;
          }
        });
      }
    },
  },
  filters: {
    dateFormat(val) {
      return dateFormat(val);
    },
  },
};
</script>

<style>
.username {
  font-family: "Eater", cursive;
  color: rgba(33, 33, 33, 0.7);
}
</style>